<%--
  Created by IntelliJ IDEA.
  User: JAVA
  Date: 2019/12/13
  Time: 10:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<jsp:include page="inc.jsp"/>
<html>
<head>
    <title>发送手机短信验证码</title>
</head>
<body>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                sendCode();
                var i = 10;
                $(this).attr('disabled',true);
                var si = setInterval(function () {
                    i--;
                    $('#btn').val(i+"后,重新获取");
                    if(i==1){
                        clearInterval(si);
                        $('#btn').val("点击重新获取");
                        $('#btn').attr('disabled',false);
                    }
                },1000);
            });
        });
        function sendCode() {
            var phone = $('#phone').val();
            $.ajax({
                type:'GET',
                url:'${ctx}/send/sendPhoneCode/'+phone,
                dataType:'json',
                success:function (r) {
                    alert(r.msg);
                }
            });
        }
        function  toRegister() {
            var f = $('#dataForm');
            var data = f.serialize();
            $.ajax({
                type:'POST',
                url:'${ctx}/send/toReg',
                data:data,
                dataType:'json',
                success:function(r){
                    alert(r.msg);
                 }
            });
        }
    </script>
    <div class="container" style="margin-top: 100px">
        <center>
            <form class="form-horizontal" id="dataForm">
                <div class="form-group">
                    <label class="col-sm-2 control-label">手机号码</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="phone" name="phone" placeholder="11位手机号码">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">&nbsp;</label>
                    <div class="col-sm-6">
                        <div class="input-group">
                            <input type="text" class="form-control" name="code">
                            <span class="input-group-btn">
                                <input class="btn btn-default" id="btn" value="获取手机验证码"></input>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="button" class="btn btn-success" value="点击确定" onclick="toRegister()">
                    </div>
                </div>
            </form>
        </center>
    </div>

</body>
</html>
